アニメーション

Chart.js は、すぐにグラフをアニメーション化します。アニメーションの見た目やアニメーションにかかる時間を設定するためのオプションが多数用意されています。

アニメーション構成

次のアニメーション オプションが利用可能です。のグローバル オプションは次のように定義されています。Chart.defaults.global.animation。

イージング

利用可能なオプションは次のとおりです。

• 'linear'
• 'easeInQuad'
• 'easeOutQuad'
• 'easeInOutQuad'
• 'easeInCubic'
• 'easeOutCubic'
• 'easeInOutCubic'
• 'easeInQuart'
• 'easeOutQuart'
• 'easeInOutQuart'
• 'easeInQuint'
• 'easeOutQuint'
• 'easeInOutQuint'
• 'easeInSine'
• 'easeOutSine'
• 'easeInOutSine'
• 'easeInExpo'
• 'easeOutExpo'
• 'easeInOutExpo'
• 'easeInCirc'
• 'easeOutCirc'
• 'easeInOutCirc'
• 'easeInElastic'
• 'easeOutElastic'
• 'easeInOutElastic'
• 'easeInBack'
• 'easeOutBack'
• 'easeInOutBack'
• 'easeInBounce'
• 'easeOutBounce'
• 'easeInOutBounce'

見るロバート・ペナーのイージング方程式。

アニメーションコールバック

のonProgressとonCompleteコールバックは、外部描画をチャート アニメーションに同期するのに役立ちます。コールバックには、Chart.Animation実例：

{
    // Chart object
    chart: Chart,

    // Current Animation frame number
    currentStep: number,

    // Number of animation frames
    numSteps: number,

    // Animation easing to use
    easing: string,

    // Function that renders the chart
    render: function,

    // User callback
    onAnimationProgress: function,

    // User callback
    onAnimationComplete: function
}

次の例では、チャートのアニメーション中に進行状況バーを塗りつぶします。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            onProgress: function(animation) {
                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
            }
        }
    }
});

これらのコールバックの別の使用例は、次の場所にあります。ギットハブ: このサンプルでは、​​アニメーションの進行状況を示す進行状況バーが表示されます。